<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="keywords" content="desktop">
    <meta name="description" content="desktop">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- ios主题样式 -->
    <link rel="stylesheet" href="/static/framework7/css/framework7.ios.min.css">
    <link rel="stylesheet" href="/static/framework7/css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="/static/framework7/icon/css/framework7-icons.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="/static/common/css/common.css">
</head>

<body>
<!-- 全屏幕模式状态栏覆盖 -->
<div class="statusbar-overlay"></div>

<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="center sliding">Socket Demo</div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page">
                <div class="page-content">
                    <div class="list-block">
                        <ul>
                            <!-- Text inputs -->
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-input">
                                            <input type="text" id="userId" placeholder="请输入您的id">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li style="padding: 10px;">
                                <p><a href="#" class="button button-fill color-green" onclick="create_conn()">连接</a></p>
                            </li>
                            <li class="align-top">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-input">
                                            <textarea placeholder="发送信息" id="sendMessage"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li style="padding: 10px;">
                                <p><a href="#" class="button button-fill color-green" onclick="send()">发送</a></p>
                            </li>
                        </ul>
                    </div>
                    <div class="list-block" id="list-message">


                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!-- 核心脚本start -->
<script src="/static/framework7/js/framework7.min.js"></script>
<script src="/static/common/js/handlebars.js"></script>         <!-- 模板引擎 -->
<script src="/static/common/js/socket.io.js"></script>          <!-- socket引擎 -->
<script src="/static/common/js/socket.plug.js"></script>        <!-- socket组件封装 -->
<script src="/static/framework7/global.js"></script>            <!-- 全局配置 -->
<script src="/static/common/js/common.js"></script>             <!-- 公共函数 -->
<script src="/static/common/js/utils.js"></script>              <!-- 工具函数 -->
<!-- 核心脚本end -->
<!-- 模板start -->
<script id="message-template" type="text/x-handlebars-template">
    {{#each this}}
    <div class="card">
        <div class="card-content">
            <div class="card-content-inner">
                消息:{{message}}<br>
                操作code:{{code}}
            </div>
        </div>
    </div>
    {{/each}}
</script>
<!-- 模板end -->
<!-- 业务脚本start -->
<script src="/logic/demo/socket.js"></script>
<!-- 业务脚本end -->
</body>
</html>